<template>
  <view class="login-bg">
    <view class="login-container">
      <view class="login-title">欢迎回来</view>
      <view class="login-subtitle">请登录您的账号</view>
      <view class="login-form">
        <view class="input-group">
          <text class="input-label">用户名</text>
          <view class="input-wrapper">
            <uni-icons type="person" size="22" color="#b0b3c6" />
            <input v-model="username" placeholder="请输入用户名" class="login-input" />
          </view>
        </view>
        <view class="input-group">
          <text class="input-label">密码</text>
          <view class="input-wrapper">
            <uni-icons type="locked" size="22" color="#b0b3c6" />
            <input v-model="password" placeholder="请输入密码" password class="login-input" />
          </view>
        </view>
        <view class="login-options">
          <label class="remember-me">
            <checkbox v-model="rememberMe" style="transform:scale(0.8)" />
            <text>记住我</text>
          </label>
          <text class="forgot" @click="onForgot">忘记密码?</text>
        </view>
        <button class="login-btn" @click="onLogin">登 录</button>
        <view class="register-tip">
          还没有账号？<text class="register-link" @click="onRegister">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const rememberMe = ref(false)

function onLogin() {
  if (!username.value || !password.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  uni.showToast({ title: '登录成功', icon: 'success' })
  setTimeout(() => {
    uni.reLaunch({ url: '/pages/index/index' })
  }, 500)
}
function onForgot() {
  uni.showToast({ title: '请联系管理员找回密码', icon: 'none' })
}
function onRegister() {
  uni.navigateTo({ url: '/pages/register/register' })
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a6c0fe 0%, #f2a8fd 100%);
}
.login-container {
  width: 90vw;
  max-width: 370px;
  padding: 36rpx 32rpx 32rpx 32rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 8rpx 32rpx 0 rgba(80,80,120,0.10);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #353535;
  margin-bottom: 12rpx;
  margin-top: 8rpx;
}
.login-subtitle {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 36rpx;
}
.login-form {
  width: 100%;
}
.input-group {
  margin-bottom: 28rpx;
}
.input-label {
  font-size: 24rpx;
  color: #353535;
  margin-bottom: 8rpx;
  display: block;
}
.input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.8);
  border-radius: 12rpx;
  padding: 0 18rpx;
  border: 1rpx solid #e0e0e0;
}
.login-input {
  flex: 1;
  height: 80rpx;
  border: none;
  background: transparent;
  font-size: 28rpx;
  margin-left: 12rpx;
}
.login-input:focus {
  outline: none;
}
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}
.remember-me {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #666;
}
.forgot {
  color: #6c63ff;
  font-size: 22rpx;
  text-decoration: underline;
}
.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(90deg, #a6c0fe 0%, #f2a8fd 100%);
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 16rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(166,192,254,0.15);
}
.login-btn:active {
  opacity: 0.85;
}
.register-tip {
  text-align: center;
  color: #888;
  font-size: 22rpx;
}
.register-link {
  color: #6c63ff;
  margin-left: 8rpx;
  font-weight: 500;
}
</style> 